/**
 * Created by apple on 2017/11/9.
 */
import React, {PureComponent} from 'react'
import {
  View,
  Text,
  StyleSheet,
  Image,
  AppRegistry,
  BackHandler, Animated, Easing
} from 'react-native'
import {StackNavigator, TabNavigator, addNavigationHelpers, NavigationActions} from 'react-navigation';
import WelcomePage from './WelcomePage'
import Popular from './route/popular/Popular'
import MyDetail from './route/MyDetail';
import My from './route/My/My'
import ListDemo from './route/list/List'
import AccordionExmple from './route/accrodion/Accrodion'
import ActionSheetDemo from './route/actionSheet/ActionSheet'
import ActivityIndicatorDemo from './route/activityIndicator/ActivityIndicatorDemo'
import BadgeDemo from './route/badge/Badge'
import CardDemo from './route/card/Card'
import ButtonDemo from './route/button/Button'
import CarouselDemo from './route/carousel/Carousel'
import CheckBox from './route/checkBox/CheckBox'
import DatePickerViewDemo from './route/datePickerView/DatePickerView'
import Drawer from './route/drawer/Drawer'
import Flex from './route/flex/Flex'
import Grid from './route/grid/Grid'
import Icon from './route/icon/Icon'
import ImagePicker from './route/imagePicker/ImagePicker'
import InputItem from './route/inputItem/InputItem'
import Menu from './route/menu/Menu'
import Model from './route/model/Model'
import NoticeBar from './route/noticeBar/NoticeBar'
import Pagination from './route/pagination/Pagination'
import PickerView from './route/pickerView/PickView'
import Picker from './route/picker/Picker'
import Popover from './route/popover/Popover'
import Progress from './route/progress/Progress'

import {connect} from 'react-redux'

const Tab = TabNavigator(
  {
    Popular: {
      screen: Popular,
      navigationOptions: ({navigation}) => ({
        tabBarLabel: '首页',
        tabBarIcon: ({focused, tintColor}) => (
          <Image
            source={require('../assets/images/ic_arrow_back_white_36pt.png')}
            style={{tintColor: tintColor}}
          />
        )
      }),
    },
    My: {
      screen: My,
      navigationOptions: ({navigation}) => ({
        tabBarLabel: '我的页面',
        tabBarIcon: ({focused, tintColor}) => (
          <Image
            source={require('../assets/images/ic_feedback.png')}
            style={{tintColor: 'red'}}
          />
        )
      }),
    },
  },
  {
    tabBarPosition: 'bottom',
    animationEnabled: true,
    tabBarOptions: {
      activeTintColor: '#e91e63',
    },
  }
);

const SetUp = StackNavigator({
    Tab: {
      screen: Tab,
      navigationOptions: {
        header: null
      }
    },
    Welcome: {
      screen: WelcomePage,
      navigationOptions: {
        headerTitle: '欢迎界面'
      }
    },
    ListDemo: {
      screen: ListDemo,
      navigationOptions: {
        headerTitle: 'ListDemo'
      }
    },
    Popular: {
      screen: Popular,
      navigationOptions: {
        headerTitle: '最热模块',
      }
    },
    MyDetail: {
      screen: MyDetail,
      navigationOptions: {
        headerTitle: '详情'
      }
    },
    accrodion: {
      screen: AccordionExmple,
      navigationOptions: {
        headerTitle: 'Accrodion'
      }
    },
    actionSheet: {
      screen: ActionSheetDemo,
      navigationOptions: {
        headerTitle: 'ActionSheetDemo'
      }
    },
    ActivityIndicator: {
      screen: ActivityIndicatorDemo,
      navigationOptions: {
        headerTitle: 'ActivityIndicatorDemo'
      }
    },
    Badge: {
      screen: BadgeDemo,
      navigationOptions: {
        headerTitle: 'BadgeDemo'
      }
    },
    card: {
      screen: CardDemo,
      navigationOptions: {
        headerTitle: 'CardDemo'
      }
    },
    button: {
      screen: ButtonDemo,
      navigationOptions: {
        headerTitle: 'ButtonDemo'
      }
    },
    carousel: {
      screen: CarouselDemo,
      navigationOptions: {
        headerTitle: 'carouselDemo'
      }
    },
    checkBox: {
      screen: CheckBox,
      navigationOptions: {
        headerTitle: 'CheckBoxDemo'
      }
    },
    datePickerView: {
      screen: DatePickerViewDemo,
      navigationOptions: {
        headerTitle: 'DatePickerViewDemo'
      }
    },
    drawer: {
      screen: Drawer,
      navigationOptions: {
        headerTitle: 'DrawerDemo'
      }
    },
    flex: {
      screen: Flex,
      navigationOptions: {
        headerTitle: 'FlexDemo'
      }
    },
    grid: {
      screen: Grid,
      navigationOptions: {
        headerTitle: 'GridDemo'
      }
    },
    icon: {
      screen: Icon,
      navigationOptions: {
        headerTitle: 'IconDemo'
      }
    },
    imagePicker: {
      screen: ImagePicker,
      navigationOptions: {
        headerTitle: 'imagePickerDemo'
      }
    },
    inputItem: {
      screen: InputItem,
      navigationOptions: {
        headerTitle: 'inputItemDemo'
      }
    },
    menu: {
      screen: Menu,
      navigationOptions: {
        headerTitle: 'menuDemo'
      }
    },
    model: {
      screen: Model,
      navigationOptions: {
        headerTitle: 'modelDemo'
      }
    },
    noticeBar:{
      screen:NoticeBar,
      navigationOptions:{
        headerTitle:'noticeBarDemo'
      }
    },
    pagination:{
      screen:Pagination,
      navigationOptions:{
        headerTitle:'paginationDemo'
      }
    },
    pickerView:{
      screen:PickerView,
      navigationOptions:{
        headerTitle:'pickerViewDemo'
      }
    },
    picker:{
      screen:Picker,
      navigationOptions:{
        headerTitle:'pickerDemo'
      }
    },
    popover:{
      screen:Popover,
      navigationOptions:{
        headerTitle:'popoverDemo'
      }
    },
    progress:{
      screen:Progress,
      navigationOptions:{
        headerTitle:'progressDemo'
      }
    },
  },
  {
    headerMode: 'screen',
    mode: 'card',
    initialRouteName: 'Welcome'
    // navigationOptions: {
    //   gesturesEnabled: false,
    // },
    // transitionConfig: () => ({
    // transitionSpec: {
    //   duration: 300,
    //   easing: Easing.out(Easing.poly(4)),
    //   timing: Animated.timing,
    // },
    //     screenInterpolator: sceneProps => {
    //       const { layout, position, scene } = sceneProps;
    //       const { index } = scene;
    //
    //       const height = layout.initHeight;
    //       const translateY = position.interpolate({
    //         inputRange: [index - 1, index, index + 1],
    //         outputRange: [height, 0, 0],
    //       });
    //
    //       const opacity = position.interpolate({
    //         inputRange: [index - 1, index - 0.99, index],
    //         outputRange: [0, 1, 1],
    //       });
    //       return { opacity, transform: [{ translateY }] };
    //     },
    // }),
  }
);

const AppNavigator = StackNavigator(
  {
    Main: {screen: SetUp},

  },
  {
    headerMode: 'none',
    mode: 'modal',
    navigationOptions: {
      gesturesEnabled: false,
    },
    transitionConfig: () => ({
      transitionSpec: {
        duration: 300,
        easing: Easing.out(Easing.poly(4)),
        timing: Animated.timing,
      },
      screenInterpolator: sceneProps => {
        const {layout, position, scene} = sceneProps
        const {index} = scene

        const height = layout.initHeight
        const translateY = position.interpolate({
          inputRange: [index - 1, index, index + 1],
          outputRange: [height, 0, 0],
        })

        const opacity = position.interpolate({
          inputRange: [index - 1, index - 0.99, index],
          outputRange: [0, 1, 1],
        })

        return {opacity, transform: [{translateY}]}
      },
    }),
  }
)

function getCurrentScreen(navigationState) {
  if (!navigationState) {
    return null
  }
  console.log(navigationState)
  const route = navigationState.routes[navigationState.index];
  console.log(route);
  if (route.routes) {
    return getCurrentScreen(route)
  }
  return route.routeName
}


@connect(({router}) => ({router}))
class Router extends PureComponent {
  componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', this.backHandle)
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.backHandle)
  }

  backHandle = () => {

    const currentScreen = getCurrentScreen(this.props.router);
    console.log(currentScreen);
    this.props.dispatch(NavigationActions.back())

    // if (currentScreen === 'Login') {
    //   return true
    // }
    // if (currentScreen !== 'Home') {
    //   console.log(currentScreen);
    //
    //   return true
    // }
    return true
  }

  render() {
    const {dispatch, router} = this.props
    const navigation = addNavigationHelpers({dispatch, state: router});
    console.log(navigation);
    return <AppNavigator navigation={navigation}/>
  }
}

export function routerReducer(state, action = {}) {
  return AppNavigator.router.getStateForAction(action, state)
}

export default Router;
